<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	
<h:head>
	<h:outputStylesheet library="css" name="style.css"/>	
</h:head>

<h:body>
		<p:dialog id="editEnactorDialog" width="1000" height="550" header="Edit Goal Enactor Selection" widgetVar="editEnactorDlg"  resizable="false" position="center" closable="true">
		<h:form id="editEnactorForm">

        	<p:dataTable var="user" value="#{enactorTable.dataModel}" paginator="true" rows="10" 
        		         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" 
        				 paginatorPosition="bottom"  id="enactorTable" lazy="true"  style="width:100%">  
	      	
	      		<p:column style="width:5%">
  					<p:commandButton icon="ui-icon-plusthick" actionListener="#{enactorTable.selectUser(user)}" 
  					                 update=":#{p:component('editEnactorForm')}" styleClass="tableButton"/>
  				</p:column>
	      
	      		<p:column headerText="ID" sortBy="#{user.id}" filterBy="#{user.id}">  
		        	<h:outputText value="#{user.id}" />  
		    	</p:column>  
	      	
		    	<p:column headerText="Username" sortBy="#{user.username}" filterBy="#{user.username}">  
		        	<h:outputText value="#{user.username}" />  
		    	</p:column>  
	      
		   	 	<p:column headerText="Firstname" sortBy="#{user.firstName}" filterBy="#{user.firstName}">  
		        	<h:outputText value="#{user.firstName}" />  
		    	</p:column>  
	      
		    	<p:column headerText="Lastname" sortBy="#{user.lastName}" filterBy="#{user.lastName}">  
		        	<h:outputText value="#{user.lastName}" />  
		    	</p:column>  
	       
		    	<p:column headerText="Role" sortBy="#{user.role.title}" filterBy="#{user.role.title}">  
		        	<h:outputText value="#{user.role.title}" />  
		    	</p:column>  
        	</p:dataTable>  
	        <br/><br/>
	        
	        <p:panelGrid style="width:100%">
	        	<f:facet name="header">  
            		<p:row>
            			<p:column colspan="6" style="text-align:center;"><p:outputLabel value="Selected Enactor"/></p:column>
            		</p:row> 
            		<p:row>
            			<p:column colspan="1" style="width:5%"/>
            			<p:column colspan="1" style="">
            				<p:outputLabel value="ID" /> 
            			</p:column>
            			<p:column colspan="1" style=""> 
            				<p:outputLabel value="Username" />
            			</p:column>
            			<p:column colspan="1" style=""> 
            				<p:outputLabel value="Firstname" />
            			</p:column>
            			<p:column colspan="1" style=""> 
            				<p:outputLabel value="Lastname" />
            			</p:column>
            			<p:column colspan="1" style=""> 
            				<p:outputLabel value="Role" />
            			</p:column>
            		</p:row>
        		</f:facet>
        		<p:row rendered="#{enactorTable.render_selected_enactor}">
        			<p:column>
        				<p:commandButton icon="ui-icon-minusthick" update=":#{p:component('editEnactorForm')}" 
        				                 actionListener="#{enactorTable.removeSelectedUser()}" styleClass="tableButton" />
        			</p:column>
        			<p:column>
        				<p:outputLabel value="#{enactorTable.selectedUser.id.toString()}" />
        			</p:column>
        			<p:column>
        				<p:outputLabel value="#{enactorTable.selectedUser.username}" />
        			</p:column>
        			<p:column>
        				<p:outputLabel value="#{enactorTable.selectedUser.firstName}" />
        			</p:column>
        			<p:column>
        				<p:outputLabel value="#{enactorTable.selectedUser.lastName}" />
        			</p:column>
        			<p:column>
        				<p:outputLabel value="#{enactorTable.selectedUser.role.title}" />
        			</p:column>	
        		</p:row>
	        
	        </p:panelGrid>
	        
       		<p:panelGrid styleClass="NoBorderTable" style="width:100%;">
       			<p:row style="border: none;">
       				<p:column colspan="2" style="border: none;"></p:column>
       			</p:row>
       			<p:row style="border: none;">
       				<p:column colspan="2" style="border: none;"></p:column>
       			</p:row>
       			<p:row>
       				<p:column colspan="1" style="text-align:right;width:90%;border: none;">
       					<p:commandButton value="Cancel" icon="ui-icon-circle-close" actionListener="#{enactorTable.cancelSelection()}"
       									 update=":#{p:component('editEnactorForm')}" oncomplete="editEnactorDlg.hide()" /> 
       				</p:column>
       				<p:column colspan="1" style="text-align:left;width:10%;border: none;">
       					<p:commandButton value="Confirm" icon="ui-icon-circle-check" actionListener="#{enactorTable.confirmSelection()}"
       						   			 update=":#{p:component('contentForm')}"  oncomplete="editEnactorDlg.hide()"/>
       				</p:column>
       			</p:row>
       		</p:panelGrid>
		</h:form>
	</p:dialog>
</h:body>
</html>